<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>抽人系统</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
    text-align: center;
  }
  .container {
    max-width: 600px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  #result {
    margin-top: 20px;
    padding: 10px;
    background-color: #e9ecef;
    border-radius: 4px;
  }
  .history {
    margin-top: 20px;
    padding: 10px;
    background-color: #e9ecef;
    border-radius: 4px;
    max-height: 200px;
    overflow-y: auto;
  }
  .history-item {
    margin-bottom: 5px;
  }
</style>
</head>
<body>
  <div class="container">
    <h1>抽人系统</h1>
    <button id="drawButton">抽人</button>
    <button id="drawMultipleButton">连续抽人</button>
    <div id="result"></div>
    <div class="history" id="history"></div>
  </div>

  <script>
    const groups = [
      {
        id: 1,
        name: "第一组",
        members: ["成员1-1", "成员1-2", "成员1-3"]
      },
      {
        id: 2,
        name: "第二组",
        members: ["成员2-1", "成员2-2", "成员2-3"]
      },
      {
        id: 3,
        name: "第三组",
        members: ["成员3-1", "成员3-2", "成员3-3"]
      }
    ];

    let lastGroup = null;
    let lastMember = null;

    function drawMember() {
      let availableGroups = groups.filter(group => group.id !== lastGroup?.id);
      if (availableGroups.length === 0) {
        lastGroup = null; // 重置组状态，允许重新抽取所有组
        availableGroups = groups;
      }

      const selectedGroup = availableGroups[Math.floor(Math.random() * availableGroups.length)];
      const availableMembers = selectedGroup.members.filter(member => member !== lastMember);
      const selectedMember = availableMembers[Math.floor(Math.random() * availableMembers.length)];

      lastGroup = selectedGroup;
      lastMember = selectedMember;

      return `${selectedMember} (${selectedGroup.name})`;
    }

    function addResultToHistory(result) {
      const historyContainer = document.getElementById('history');
      const newResultItem = document.createElement('div');
      newResultItem.classList.add('history-item');
      newResultItem.textContent = result;
      historyContainer.insertBefore(newResultItem, historyContainer.firstChild); // 插入到顶部
    }

    document.getElementById('drawButton').addEventListener('click', function() {
      const result = drawMember();
      document.getElementById('result').textContent = result;
      addResultToHistory(result);
    });

    document.getElementById('drawMultipleButton').addEventListener('click', function() {
      const numberOfDraws = prompt("请输入连续抽人的次数:");
      const results = [];
      for (let i = 0; i < numberOfDraws; i++) {
        results.push(drawMember());
      }
      const resultText = results.join(', ');
      document.getElementById('result').textContent = resultText;
      addResultToHistory(resultText);
    });
  </script>
</body>
</html>